<template>
  <el-dialog title="导入客户" :visible.sync="visible" width="30%">
    <el-upload
      class="upload-demo"
      drag
      action="/api/customer/import"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传 xlsx/xls 文件</div>
    </el-upload>
    
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'ImportDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSuccess(response) {
      this.$message.success('上传成功')
    },
    handleError() {
      this.$message.error('上传失败')
    },
    handleConfirm() {
      this.$emit('confirm')
      this.$emit('update:visible', false)
    }
  }
}
</script> 